
    <main class="lyear-layout-content">

        <div class="container-fluid p-t-15">

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>积分统计</h4>
                        </div>
                        <div class="card-body">
                            <!-- echarts 容器 -->
                            <div id="main" style="height:60em;"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </main>

    <script src="/static/echarts/echarts.min.js"></script>
    <script type="text/javascript">
        var chartDom = document.getElementById('main')

    //echarts图表初始化
    var myChart = echarts.init(chartDom);

    var option;


    // 更新事件
    myChart.on('updateAxisPointer', function (event) {

        const xAxisInfo = event.axesInfo[0];

        if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });


    //echarts图表插件进行渲染
    option && myChart.setOption(option);

    $.ajax({
        url: `{:url('admin/analysis/record')}`,
        type: 'post',
        data: { action: 'record' },
        dataType: 'json',
        success: function (success) {
            //给图表进行赋值
            option = {
                legend: {},
                tooltip: { //提示框
                    trigger: 'axis',  //坐标轴触发
                    showContent: true, //是否显示提示框浮层
                },
                dataset: { //原始数据
                    source: success.data
                },
                xAxis: { type: 'category' }, //X轴  类目轴
                yAxis: { gridIndex: 0 },  //Y轴
                grid: { top: '55%' },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        emphasis: {  //高亮状态
                            focus: 'self'
                        },
                        label: {
                            formatter: '{b}: {@2012} ({d}%)'  //{b}分类 {@2012}默认年份 ({d}%) 百分比
                        },
                        encode: {
                            itemName: 'record',
                            value: '2012',
                            tooltip: '2012'
                        }
                    }
                ]
            }

            myChart.setOption(option);

        }
    })
    </script>
